import React, { useState } from 'react';
import { Card, Button, Input, Collapse, Alert, Switch, Row, Col } from 'antd';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'; // 支持 GitHub 风格的 Markdown

// types.ts
export interface ModelChatProps {
    model: string;  // 模型的名字
    enabled: boolean;  // 控制该模型是否启用
    messages: {
        model: string;  // 消息的模型名
        role: string;  // 消息的角色（例如：assistant, user）
        content: string;  // 消息的内容，应该是字符串类型
    }[];  // 消息数组，包含多个消息对象
    onSendMessage: (assistantMessage: { model: string; text: string }, sourceModel: string) => void;  // 发送消息的回调函数
    allAtOnce: boolean;  // 控制是否一次性显示所有聊天框
    sendMessage: (action: string, data: any) => void;  // 用于发送 toggle 操作的回调函数
}

const { Panel } = Collapse;


const ModelChat: React.FC<ModelChatProps> = ({ model, enabled, messages, onSendMessage, allAtOnce, sendMessage }) => {
    const [messageInput, setMessageInput] = useState<string>('');

    // Toggle model enabled state
    const handleToggle = () => {
        sendMessage('toggle', { model, enabled: !enabled });
    };

    // Handle send message
    const handleSend = () => {
        if (messageInput.trim()) {
            onSendMessage({ model, text: messageInput.trim() }, model);
            setMessageInput(''); // 清空输入框
        }
    };

    return (
        <Card style={{ width: 600, margin: '50px 0' }}>
            <Row style={{ height: '40px', color: enabled ? 'black' : 'gray' }} justify="space-between" align="middle">
                <Col>
                    <h3>Model: {model === "ernie" ? '文心一言' : model === "openai" ? "OpenAI" : model}</h3>
                </Col>
                <Col>
                    <div>
                        <span>Model Enabled: </span>
                        <Switch checked={enabled} onChange={handleToggle} />
                    </div>
                </Col>
            </Row>
            <Collapse defaultActiveKey={['1']}>
                <Panel header="Chat Messages" key="1">
                    <div style={{ maxHeight: '300px', overflowY: 'auto', marginBottom: '10px' }}>
                        {messages?.length === 0 ? (
                            <Alert message="No messages yet!" type="info" />
                        ) : (
                            messages?.map((message, index) => (
                                <div key={index} style={{ marginBottom: '10px' }}>
                                    <p><strong>{message.model === "ernie" ? '文心一言' : message.model === "openai" ? "OpenAI" : message.model} ({message.role}):</strong></p>
                                    <ReactMarkdown children={String(message.content)} remarkPlugins={[remarkGfm]} />
                                </div>
                            ))
                        )}
                    </div>
                </Panel>
            </Collapse>

            {/* 如果禁用模型存在 */}
            {!enabled && (
                <Row gutter={[16, 16]} justify="start">
                    <Col style={{ textAlign: 'center' }}>
                        <Card style={{ width: '100%', textAlign: 'center' }}>
                            <p>Model Disabled</p>
                        </Card>
                    </Col>
                </Row>
            )}

            {enabled && (
                <>
                    <Input.TextArea
                        value={messageInput}
                        onChange={(e) => setMessageInput(e.target.value)}
                        rows={3}
                        placeholder="Type your message here..."
                        style={{ marginBottom: 10 }}
                    />
                    <Button type="primary" block onClick={handleSend}>
                        发送
                    </Button>
                </>
            )}
        </Card>
    );
};

export default ModelChat;
